<link href="{$base_dir}css/datePicker.css" type="text/css" rel="stylesheet"/>

<script type="text/javascript" src="{$base_dir}js/jquery.datePicker.js"></script>

<script type="text/javascript">
{literal}
	$(document).ready(function() {
		$('#alive_sale_program_list').tablesorter();
		$('#alive_sale_program_list tbody tr:even').toggleClass('alt');
		
		//$('.date_pick').datePicker({startDate:'01/01/2009'});
		addDatePicker("#start_dd",'#start_mm','#start_yyyy',true,true,true);
		addDatePicker("#end_dd",'#end_mm','#end_yyyy',true,true,true);
				
	});	
{/literal}
</script>
<br />

<!-- The view to add (or edit)  sale_program -->

<div id="add_form" class="form_container" style="width: 450px;">
<form id="add_sale_program_store_form" name="add_sale_program_store_form">
	<div>
        <span id="status_message_add" style="font-style: italic; color: red;"></span>
    </div>
    <table cellspacing="0" cellpadding="0">
        <tr>
            <td colspan="2" class="field" style="text-transform: uppercase">{translate}Promotion program{/translate} </td>
        </tr>
        
        <tr>
            <td class="label">{translate}Select promotion program{/translate}</td>
            <td class="field" colspan="2">
                
                <select id="sale_program_id" name="sale_program_id" style="width: 150px" >
                    {foreach from=$saleProgramList item=sale_program}
                    <option value="{$sale_program.sale_program_id}">{$sale_program.name}</option>
                    {/foreach}
                </select>            
            </td>                                
        </tr>
        <tr>
            <td class="label">{translate}Start date{/translate} 
			</td>
			<!-- 		
			<td class="field"><input id="start_date" name="start_date" class="date_pick" type="text" size="10" value="{$today}" onchange="check_date_in_add_form()"></td>
			-->
			<td class="field" ><input name="start_{$datePart_0}" id="start_{$datePart_0}" type="text" value="" style="width: 21px;"><span class="label">-</span><input name="start_{$datePart_1}" id="start_{$datePart_1}" type="text" value="" style="width: 21px;"><span class="label">-</span><input name="start_{$datePart_2}" id="start_{$datePart_2}" type="text" value="" style="width: 40px;"><br><span class="label" style="width: 21px; color: #AAA;">({$datePart_0}-{$datePart_1}-{$datePart_2})</span>
			</td>
			                               
        </tr>
        <tr>
            <td class="label">{translate}End date{/translate} 
			</td>	
			<!-- 	
			<td class="field"><input id="end_date" name="end_date" class="date_pick" type="text" size="10" value="" onchange="check_date_in_add_form()"></td>
			-->
			<td class="field" ><input name="end_{$datePart_0}" id="end_{$datePart_0}" type="text" value="" style="width: 21px;"><span class="label">-</span><input name="end_{$datePart_1}" id="end_{$datePart_1}" type="text" value="" style="width: 21px;"><span class="label">-</span><input name="end_{$datePart_2}" id="end_{$datePart_2}" type="text" value="" style="width: 40px;"><br><span class="label" style="width: 21px; color: #AAA;">({$datePart_0}-{$datePart_1}-{$datePart_2})</span>
			</td>                               
        </tr>
        <tr>            
            <td colspan="2" style="text-align: right;">
            	<input id="button_add" type="button" value="{translate}Add new{/translate}" onclick="javascript:addSaleProgramStore();">            	
            </td>                                
        </tr>
        
        
        <!-- Table of mapped service list -->
        
    </table>
    

</form>
</div>

<div id="edit_form" class="form_container" style="width: 450px; display: none;">
<form id="edit_sale_program_store_form" name="edit_sale_program_store_form">

    <div>
        <span id="status_message_edit" style="font-style: italic; color: red;"></span>
    </div>
    <input type="hidden" id="sale_program_store_id" name="sale_program_store_id" value=""> 
    <table cellspacing="0" cellpadding="0">
        <tr>
            <td colspan="2" class="field" style="text-transform: uppercase">{translate}Edit promotion program{/translate} </td>
        </tr>
        <tr>
            <td class="label">{translate}Promotion program name{/translate}</td>
            <td class="field" colspan="2">
      			<input id="name" name="name" type="text" value="" disabled="disabled">
            </td>                                
        </tr>
        <tr>
            <td class="label">{translate}Start date{/translate} 
			</td>
			<td class="field" ><input name="edit_start_{$datePart_0}" id="edit_start_{$datePart_0}" type="text" value="" style="width: 21px;"><span class="label">-</span><input name="edit_start_{$datePart_1}" id="edit_start_{$datePart_1}" type="text" value="" style="width: 21px;"><span class="label">-</span><input name="edit_start_{$datePart_2}" id="edit_start_{$datePart_2}" type="text" value="" style="width: 40px;"><br><span class="label" style="width: 21px; color: #AAA;">({$datePart_0}-{$datePart_1}-{$datePart_2})</span>
			</td>
			                               
        </tr>
        <tr>
            <td class="label">{translate}End date{/translate} 
			</td>	
			<td class="field" ><input name="edit_end_{$datePart_0}" id="edit_end_{$datePart_0}" type="text" value="" style="width: 21px;"><span class="label">-</span><input name="edit_end_{$datePart_1}" id="edit_end_{$datePart_1}" type="text" value="" style="width: 21px;"><span class="label">-</span><input name="edit_end_{$datePart_2}" id="edit_end_{$datePart_2}" type="text" value="" style="width: 40px;"><br><span class="label" style="width: 21px; color: #AAA;">({$datePart_0}-{$datePart_1}-{$datePart_2})</span>
			</td>                               
        </tr>        
        <tr>            
            <td colspan="2" style="text-align: right;">                	
            	<input id="button_save" type="button" value="{translate}Save{/translate}" onclick="javascript:saveSaleProgramStore();" >
            	<input id="button_cancel" type="button" value="{translate}Cancel{/translate}" onclick="javascript:cancelSaleProgramStore();" >
            </td>                                
        </tr>
        
        
        <!-- Table of mapped service list -->
        
    </table>
    

</form>
</div>
<div id="list_sale_program_container" style="margin-top: 5px">
	<table id="alive_sale_program_list" cellspacing="0" cellpadding="0" class="grid" width="550px">
		<thead>
			<tr>
				<th class='first'>{translate}Name{/translate}</th>
				<th>{translate}ID{/translate}</th>
				<th>{translate}Start date{/translate}</th>
				<th class="last">{translate}End date{/translate}</th>						
			</tr>
		</thead>
		<tbody>
		{foreach from=$alive_sale_program_list item=sale_program}
			<tr id="{$sale_program.sale_program_store_id}">							    
			    <td class='first'>
			        <a href="javascript:editSaleProgramStore({$sale_program.sale_program_store_id},'{$sale_program.name}', '{$sale_program.start_date}','{$sale_program.end_date}','{$datePart_0}','{$datePart_1}','{$datePart_2}');" title="{translate}Edit expired date of promotion program{/translate}">{$sale_program.name}
			        </a>
			    </td>
			    <td >
			        {$sale_program.code}
			    </td>
			    <td >
			        {$sale_program.start_date}
			    </td>
			    <td class="last">
			        {$sale_program.end_date}
			    </td>
			</tr>
		{/foreach}
		</tbody>
	</table>		
</div>